<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
<head>

		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<!-- Bootstrap 3.3.5 -->
		<link rel="stylesheet" href="${ctxStatic}/login/bootstrap.min.css">
		<!-- Font Awesome -->
		<link rel="stylesheet" href="${ctxStatic}/login/font-awesome.min.css">
		<!-- Ionicons -->
		<link rel="stylesheet" href="${ctxStatic}/login/ionicons.min.css">
		<link rel="stylesheet" href="${ctxStatic}/login/skin-blue.min.css">

		<!--Added-->
		<link rel="stylesheet" href="${ctxStatic}/login/my.css">
		
		<!-- 验证   -->
		<script src="${ctxStatic}/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="${ctxStatic}/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
        <link href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css"
	     rel="stylesheet" />
        <script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
		

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
		<style>
			body {
				background: url(${ctxStatic}/login/bj.png);
			}
			
			.alert-danger, .alert-error{
				color:#bd4247;
				background-color:#f2bdb1;
				border-color:#f0a5a4;
			}
			.alert{
			    padding:8px 35px 8px 14px;
			    text-shadow:0px 1px 0px rgba(255,255,255,0.5);
			    border:1px solid #efb99e;
			}
			
		</style>


<title>${fns:getConfig('productName')}登录</title>

<script type="text/javascript">
		$(document).ready(function() {
			$("#loginForm").validate({
				rules: {
					validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
				},
				messages: {
					username: {required: "请填写用户名."},password: {required: "请填写密码."},
					validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
				},
				errorLabelContainer: "#messageBox",
				errorPlacement: function(error, element) {
					error.appendTo($("#loginError").parent());
				} 
			});
		});
		// 如果在框架或在对话框中，则弹出提示并跳转到首页
		if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
			alert('未登录或登录超时。请重新登录，谢谢！');
			top.location = "${ctx}";
		}
		
		$(function(){
			$(document).find("html").removeAttr("style");
			$(document).find("html").css({"overflow":"hidden"});
		});
	</script>
</head>
	<body class="login-layout">
		<div class="container" style="width: 600px; padding-top:60px; opacity: 0.85;">
			<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}">
			    <button data-dismiss="alert" class="close">×</button>
				<label id="loginError" class="error">${message}</label>
			</div>
			<div class="center" style="width: 100%;">
				<h1 class="productname" class="blue">${fns:getConfig('productName')}</h1>
			</div>
			<br/>
			<br/>
			<div class="panel panel-default">
				<div class="panel-body" style="">
					<form id="loginForm"style="padding: 20px;" name="myform" action="${ctx}/login" class="form-login" method="post">
						<br>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
							<div class="col-sm-9">
								<input id="username" name="username" value="${username}" type="text" class="form-control required"  placeholder="">
							</div>
						</div>
						<br>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
							<div class="col-sm-9">
								<input id="password"  name="password" type="password" class="form-control required" placeholder="">
							</div>
						</div>
						<c:if test="${isValidateCodeLogin}">
						<br/>
						<div class="validateCode">
							<label for="inputEmail3" class="col-sm-3 control-label">验证码</label>
							<div class="col-sm-4" style="width: 250px;">
								<sys:validateCode name="validateCode"   inputCssStyle="margin-bottom:0;width: 100px;display: inline;"/>
							</div>
						</div>
						</c:if>
						<br/>
						<br/>
						<div class="row">
							<!-- /.col -->
							<div class="col-xs-6">
								<button type="submit" class="btn btn-primary btn-lg btn-block">登录</button>
							</div>
							<!-- /.col -->
							<div class="col-xs-6">
								<button type="reset" class="btn btn-primary btn-lg btn-block">重置</button>
							</div>
							<!-- /.col -->
						</div>
					</div>
					</form>
				</div>
			</div>
		</div>
		<style type="text/css">
			.productname {
				margin-top: 60px;
				text-align: center;
				color: #FFFFFF;
			}
		</style>
	</body>
</html>